<template>
  <div>
    <el-row>
      <el-button type="primary" style="margin-bottom: 12px" @click="handleAdd"
        >添加
      </el-button>
      <el-table
        :data="tableData"
        class="table-body"
        :header-cell-style="{ background: '#F4F6F9', color: '#1D2129' }"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="name" show-overflow-tooltip label="标题">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleCheck(scope.row.id)"
              >{{ scope.row.name }}
            </el-link>
          </template>
        </el-table-column>
<!--        <el-table-column prop="viceTitle" label="副标题" width="400">-->
<!--        </el-table-column>-->
        <el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            {{
              scope.row.status === 1
                ? "草稿"
                : scope.row.status === 2
                ? "待审核"
                : scope.row.status === 3
                ? "已上架"
                : scope.row.status === 4
                ? "驳回"
                : scope.row.status === 5
                ? "下架"
                : scope.row.status === 6
                ? "回收站"
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="userName" width="120" label="发布人"></el-table-column>
        <el-table-column
          prop="updateDate"
          label="添加时间"
          width="160"
        ></el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row.id)"
              >编辑
            </el-button>
            <el-button :disabled="scope.row.status !== 3" type="text" @click="handleDown(scope.row.id)"
            >下架
            </el-button>
            <el-button :disabled="scope.row.status === 2 || scope.row.status === 3" type="text" @click="handleDelete(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :count="Number(count)"
        :current="1"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import Pagination from "@/components/Pagination.vue";
import { deleteHonorRollListApi, downHonorRollListApi } from "@/api/modules/honor.api";

export default {
  components: { Pagination },
  props: ["tableData", "count"],
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async getData() {},
    handleSizeChange(pageSize) {
      this.page.pageNum = pageSize;
      this.$emit("getTableData", this.page);
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum;
      this.$emit("getTableData", this.page);
    },
    async handleCheck(id) {
      this.$router.push({
        name: "/writings/honor/check",
        query: { id, type: "0" },
      });
      this.setBreadcrumb([
        {
          name: "文章管理",
          path: "/writings",
        },
        {
          name: "光荣榜",
          path: "/writings/honor",
        },
        {
          name: "查看",
          path: "/writings/honor/check",
        },
      ]);
    },
    handleEdit(id) {
      this.$router.push({
        name: "/writings/honor/detail",
        query: { id, type: "0" },
      });
      this.setBreadcrumb([
        {
          name: "文章管理",
          path: "/writings",
        },
        {
          name: "光荣榜",
          path: "/writings/honor",
        },
        {
          name: "编辑",
          path: "/writings/honor/detail",
        },
      ]);
    },
    handleAdd() {
      this.$router.push({ path: "/writings/honor/add" });
      this.setBreadcrumb([
        {
          name: "文章管理",
          path: "/writings",
        },
        {
          name: "光荣榜",
          path: "/writings/honor",
        },
        {
          name: "添加",
          path: "/writings/honor/add",
        },
      ]);
    },
    async handleDown(id) {
      await downHonorRollListApi({
        idList: [id]
      });
      this.$message({
        message: "成功",
        type: "success",
      });
      this.$emit("getTableData", this.page);
    },
    async handleDelete(id) {
      await deleteHonorRollListApi({ id });
      this.$message({
        message: "成功",
        type: "success",
      });
      this.$emit("getTableData", this.page);
    },
  },
};
</script>
